import { FilePptOutlined } from '@ant-design/icons';
import { Breadcrumb, Button, PageHeader } from 'antd';
import React from 'react';

import { OperationType } from '../../constant';
import styles from './index.module.less';

const OperationTitleByType = {
  [OperationType.Copy]: 'Create New',
  [OperationType.Create]: 'Create New',
  [OperationType.Edit]: 'Edit'
};

interface Props {
  operationType: OperationType;
  onLeave: () => boolean;
}

const Header = ({ operationType, onLeave }: Props): JSX.Element => {
  const title = `${OperationTitleByType[operationType]} Template`;

  const handleJumpInstruction = (): void => {};

  return (
    <>
      <Breadcrumb className={styles.breadcrumb}>
        <Breadcrumb.Item>
          <a onClick={onLeave}>Template</a>
        </Breadcrumb.Item>
        <Breadcrumb.Item>{title}</Breadcrumb.Item>
      </Breadcrumb>
      <PageHeader
        title={title}
        onBack={onLeave}
        className="bg-white"
        extra={[
          <Button type="link" icon={<FilePptOutlined />}>
            Template Instruction
          </Button>
        ]}
      />
    </>
  );
};

export default Header;
